<template>
    <div class="drag">
        <el-row>
            <el-col :span="12">
                <div
                    :style="{
                        width: '100%',
                        height: clientHeight + 'px',
                        background: 'url(' + backgroundImage + ') no-repeat',
                        'background-size': '100% 100%'
                    }"
                ></div>
            </el-col>
            <el-col
                :span="12"
                :style="{
                    position: 'relative',
                    height: clientHeight + 'px'
                }"
            >
                <div class="form">
                    <div class="title">欢 迎 登 录</div>
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                        <el-form-item prop="account">
                            <el-input v-model="ruleForm.account" placeholder="请输入用户名" prefix-icon="el-icon-user">
                                <template slot="suffix" v-if="historyList && historyList.length > 0">
                                    <el-dropdown @command="chooseHistory" trigger="click">
                                        <i class="el-icon-arrow-down" />
                                        <el-dropdown-menu slot="dropdown">
                                            <el-dropdown-item
                                                v-for="(item, index) in historyList"
                                                :key="index"
                                                :command="item"
                                            >
                                                <div class="history-item">
                                                    {{ item.account }}
                                                    <i class="el-icon-close" @click.stop="deleteIt(item, index)" />
                                                </div>
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input
                                type="password"
                                v-model="ruleForm.password"
                                placeholder="请输入密码"
                                prefix-icon="el-icon-lock"
                                @keyup.enter.native="submitForm"
                                show-password
                            ></el-input>
                        </el-form-item>
                        <div style="margin: 0 0 10px 0">
                            <el-checkbox v-model="rememberFlag">记住密码</el-checkbox>
                        </div>
                        <div class="login-btn">
                            <el-button type="primary" @click="submitForm"> 登 录 </el-button>
                        </div>
                    </el-form>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
const Store = require('electron-store')
const store = new Store()
export default {
    data() {
        return {
            clientHeight: 0,
            ruleForm: {
                account: '',
                password: ''
            },
            rules: {
                account: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
            },
            historyList: [],
            rememberFlag: false
        }
    },
    beforeMount() {
        this.clientHeight = document.documentElement.clientHeight || document.body.clientHeight
        this.backgroundImage = require('@/' + window.platform.backgroundImage)
    },
    created() {
        localStorage.clear()
        let historyStore = store.get('historyList')
        if (historyStore) {
            this.historyList = JSON.parse(JSON.stringify(historyStore))
        }
    },
    methods: {
        submitForm() {
            var params = {
                account: this.ruleForm.account,
                password: this.ruleForm.password
            }
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    this.$axios.post('auth/login', params).then(res => {
                        if (res.data.code == 200) {
                            localStorage.setItem('Authorization', res.data.data.accessToken)
                            localStorage.setItem('userId', res.data.data.userId)
                            localStorage.setItem('avatar', res.data.data.avatar)
                            localStorage.setItem('name', res.data.data.name)
                            localStorage.setItem('type', res.data.data.type)
                            localStorage.setItem('mac', Math.random().toString(36).slice(-6))
                            if (this.rememberFlag) {
                                let isExist = false
                                for (let i = 0; i < this.historyList.length; i++) {
                                    if (this.historyList[i].account === this.ruleForm.account) {
                                        isExist = true
                                        break
                                    }
                                }
                                if (!isExist) {
                                    this.historyList.push({
                                        account: this.ruleForm.account,
                                        password: this.ruleForm.password
                                    })
                                    store.set('historyList', this.historyList)
                                }
                            }
                            this.$router.push('/home')
                        } else {
                            this.$message.error(res.data.message)
                        }
                    })
                }
            })
        },
        chooseHistory(e) {
            this.ruleForm = JSON.parse(JSON.stringify(e))
        },
        deleteIt(item, index) {
            this.historyList.splice(index, 1)
            store.set('historyList', this.historyList)
        }
    }
}
</script>

<style scoped>
::v-deep .el-form-item__content {
    line-height: 54px;
}
::v-deep .el-input__inner {
    height: 44px;
}
.form {
    width: 80%;
    max-width: 392px;
    height: 440px;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.title {
    font-size: 36px;
    font-weight: 700;
    line-height: 60px;
    color: #364a63;
    text-align: center;
    margin-bottom: 35px;
}
.login-btn button {
    width: 100%;
    height: 44px;
}
.history-item {
    position: relative;
    width: 330px;
}
.history-item .el-icon-close {
    position: absolute;
    right: 0;
    top: 11px;
}
.el-popper[x-placement^='bottom'] {
    margin-top: 5px;
}
</style>
